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Websites bouwen met Expression Web — deel 2 


ledereen een website! 


In het eerste deel van deze cursus bouwden we een eenvoudige wel- 
komstpagina voor de site van Jan de Worstenman. Op de komende 
pagina's werken we aan de andere pagina's en gaan we het geheel 


wat stroomlijnen met CSS. # rrenerik Meuris 


p 


WAT DOEN WE? 


WAARMEE? 
HOELANG? 


MOEILIJKHEID? 


NS 


- xpression is de nieuwe familie designsoftware van Micro- 
soft. Het gezinnetje bestaat uit Expression Web, Studio, 
Blend, Designer en Media. Die laatste vier zijn vooral op profes- 
sionele ontwerpers gericht. Expression Web is zo’n beetje de 
opvolger van Microsoft Frontpage, maar dat is er niet aan te 
zien. De tool is immers een pak professioneler en uitgebreider 
dan zijn voorganger, en produceert ook kwalitatief betere re- 
sultaten. De rommelige html-code die Frontpage genereerde, 
behoort voorgoed tot het verleden. Expression Web leunt dicht 
aan bij Dreamweaver, het webbouwpakket van Adobe, maar de 


IS ER ENGENLIJK WEL EEN HOND 


GEÏNTERESSEERD IN JOU 


K leercurve is minder steil. Met deze cursus in de hand wordt het 


allemaal nóg makkelijker. 


Zo zag de site van prijzen. U kan zelfs online een bestelleg plaatsen op de 


Bestellen-pagna. Vanaf 500g leveren wij gratis aan bas binnen een 
Jan de Worsten- sat van 10 tam van onze eel 
man er uit na het Hebt u een speciaal verzoek of gewoon een vraag, dan mag u ons akijd 
eerste deel van deze bellen of mailen De juiste gegevens vandt u bij Contact. Tot bannenkoetl 
cursus. 


Cascading Style Sheets 


In het eerste deel van deze cursus gaven we onze welkomstpagina 
een simpele lay-out, met behulp van de standaardopties van Expres- 
sion Web. Met css kan je je site echter op een eenvoudige manier 
volledig naar je hand zetten. Je bespaart ook heel wat plaats door 
alle stijlelementen in één bestand te gieten en dat vervolgens aan je 
pagina’s te koppelen. Op die manier hoef je de code niet op elke 
pagina afzonderlijk in te geven en laden je pagina’s bovendien sneller 
in. Een ander voordeel is dat veranderingen in je css-bestand onmid- 
dellijk doorgevoerd worden in alle gekoppelde pagina’s. Je kan dus 
heel gemakkelijk een volledige site van lay-out veranderen zonder 
aan de eigenlijke pagina’s te moeten komen. 


jan de‘worstenma 


worst Is, Is een weg 


de, 


Beste bezoeker 


Van harte welkom op de ste van Jan de Worstenman. Al 40 jaar kan u 
bij ons terecht voor ales wat ook maar van ver met worsten te maken 
heeft Van beleg voor op uw brood over bloedpensen tot de ideale 
barbecuewoest u vindt het allemaal bij Jan de Worstenman 


Op de Worsten-pagma vindt u een hijst met onze prodscten en han 
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Css-bestand aanmaken 


We beginnen met het aanmaken van een css-bestand. 
Dat doe je door in de menubalk bovenaan op Fire en 
vervolgens op New, CSS te klikken. Er wordt een leeg 
document geopend op je werkblad, dat je best meteen 
bewaart via Fie, Save As. Geef het de naam Sri en 
druk op OK. Nu kan je de verschillende stijlen gaan 
definiëren. Het bestand aan je webpagina's hangen, 
doen we straks. 


Tags, ID's en classes 


Een nieuwe stijl aanmaken doe je in het kadertje rechts onderaan. 
Afhankelijk van welk tabblad je erin opent, krijgt het een andere 
naam. Open het tabblad Appiy SryLes en klik vervolgens op New Srvre. 
In het nieuwe venstertje kan je de eigenschappen van je nieuwe stijl 
opgeven. Links bovenaan staat de cursor in het vakje Serecror. Dat is 
de naam van het element waarop de stijl van toepassing is. Dat kan 
een html-tag zijn, maar ook een ID of een class. Tags zijn de stan- 
daardelementen die je tegenkomt op webpagina’s: hyperlinks, afbeel- 
dingen, vette letters, schuine letters, enzovoort. Als je op het pijltje 
naast het Setecror-vakje klikt, krijg je de hele lijst te zien. ID's en 
classes zijn extra eigenschappen die je kan toewijzen aan een tag. 
Als je bijvoorbeeld wil dat links naar e-mailadressen een ander kleur- 
tje krijgen dan gewone links, kan je een class aanmaken met de naam 
Maruink en die toepassen op de juiste links. Een ID is ongeveer het- 
zelfde, met het verschil dat het uniek is — het kan dus maar op één 
element in een pagina toegepast worden. Klinkt misschien behoorlijk 
ingewikkeld, maar het wordt straks allemaal wel duidelijk. 


W STE, JAN 2 


De algemene opmaak 


Om te beginnen bepalen we de basislay-out van onze pagina’s. We gaan 
aanduiden welke achtergrondafbeelding we willen en kiezen een geschikt 
lettertype voor onze tekst. In het uitklapmenu bij Serecror kies je Bony. 
In de Carecorv-lijst aan de linkerkant staat Font geselecteerd. Met de 
veldjes aan de rechterkant kan je nu de eigenschappen van de tekst 
opgeven. Als Font-ramiuy kies je voor ArraL, HELVETICA, SANS-SERIF. De Font-size 
zet je op 11 en aan de rest verander je niets. Klik nu in de Careeory-lijst 
op Backarounp. Met de Browse-knop naast het veldje Backarounp-imace ga je 
op zoek naar de achtergrondafbeelding die je ook in het eerste deel van 
de cursus gebruikte. Ten slotte ga je ook nog naar de Box-categorie, waar 
je in het veldje Top (onder Marin) de waarde 0 invult. Met een klik op OK 
bevestig je alles en zie je de code van je nieuwe stijl op het werkblad 
verschijnen. 


Links definiëren 


Klik opnieuw op New Srtvte en kies bij Serecror voor A. Omdat alle 
elementen de eigenschappen van onze Bopy overnemen, moeten 
we het lettertype niet meer bepalen. We willen wel dat de links 
onderlijnd worden, dus zet onder Texr-pecoration een vinkje bij 
UnperLine. Bij Coror selecteer je Maroon. Met een klik op OK is ook 
dat in orde. Maak nu opnieuw een stijl aan, deze keer voor de 
selector A:Hover. Daarmee bepaal je de eigenschappen van links 
als je er met je muis overgaat. Zet onder Texr-DecoRATION een 
vinkje bij None en druk op OK. 


font-family: v 
font-size: vs text-decoration: 
font-weight: |___ 7 underline 
font-style: | v oee 
5 k ine-through 
Wij vragen ons nog font-varient: E bink 
ii tij äa f water Pe [ v none 
color: E 
precies mis is met [Eon gennn 
het woord ‘donker- en re 
, B voe 
rood’, : 


New Style 


Selector: | newStyleil 


a 
Define in: | active 
a:hover 
alink 
Category: |a,visited 
ant EES 


Black acronym 


text-decoration: 


Backgrounlsr, 
Border 
Box 
Position 
Layout 6 
List blink 


underline 


overline 


line-through 


Table none 


button 
caption 
center 
cite 


AaBbYyGeLj 


Cancel 


Er zit meer in een website dan je denkt. De meeste tags worden 
echter zelden of nooit gebruikt. 


ression Web (Trial) 


Tools Table Site Window _ Help 


pe 


d Ei 
il WebSite ||Untitled_1.css* 


2 font-family: Arial, Helvetica, sans-serif; 

3 font-size: 1lpx; 

4 background-image: url('file:///C:/Documents and Settings/Clickx/Mijn do 
5 margin: Opx; 
6 
7 


Data View Task Panes 


De kleurtjes maken het toch iets overzichtelijker. 


Css aan je pagina’s hangen 


Om eens te kijken wat je nu precies hebt gemaakt, koppelen we het css-bestand aan 
een testpagina. Die maak je aan via Frie, New, HTML. Vervolgens kies je in het menu 
Insert voor HyPERLINK om een nieuwe link aan te maken. Bij Appress typ je Test.ntMm en 
met een druk op OK bevestig je deze actie. Om het css-bestand aan deze testpagina 
te koppelen, moet je opnieuw rechts onderaan in het kadertje AppLy Stres zijn, meer 
bepaald bij de link Artacu Stvte Sneet. Klik in het pop-upkadertje op Browse en ga op 
zoek naar Srrou.css. Bij ArracH To laat je het bolletje staan bij Current Pace. Als je later 
een css-bestand aan alle pagina’s van je site wil hangen, kan je Aur HTML Paces 
kiezen. ArracH As laat je staan bij Link. Klik op OK en bewaar de html-pagina met de 
naam Test. Krijg je een Save Emgeppeo Fires-kadertje, dan klik je gewoon op OK. Als je 
nu op F12 drukt, wordt de pagina geopend in je standaardbrowser. Als je alles juist 
hebt gedaan, staat er links bovenaan een onderlijnde, donkerrode link. Als je er met 
je muis overgaat, verdwijnt het lijntje. Je zou ook de achtergrond moeten zien die 
we in het vorige deel van de cursus gebruikten. 


Attach Style Sheet 


1 {C:\Documents and Settings\Clickx\Mijn do) 


: OallHTML pages —_ Attachas: © Link 
O Import 


Cen 


Als je voor Import kiest, kopi- 
eert het programma de volledige 
code van je css-bestand naar je 
webpagina. En dat willen we net 
vermijden. 


@ Current page 


a. ScreenTip 


I= In het Insert HvperLinK-kadertje kan je met de knop rechtsboven 
ook een ScreenTip ingeven. Dat is tekst die in een geel kadertje 
verschijnt als je met je muisaanwijzer boven een link blijft hangen. 


VAKTAAL 


CSS: Techniek om de vormgeving van webpagina's (titels, kadertjes, tekst) te bepalen. De 
css-informatie kan in het html-bestand zelf staan, of kan opgeroepen worden vanuit een 
apart css-bestand. Op deze manier kan je heel snel lay-outwijzigingen doorvoeren aan je 
hele site, door gewoon even iets te veranderen in dat css-bestand. 


TAG: Speciale opmaakcode van elke webpagina. De lay-out van een webpagina wordt be- 
paald door tags. Zo is er de <b>-tag die ervoor zorgt dat een woord of zin in het vet (bold) 
weergegeven wordt. 
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De hoofding opmaken 


Voor de hoofding gaan we een ID aanmaken. Open je css-bestand op 
het werkblad en maak een nieuwe stijl aan. In het Selector-kadertje 
typ je dit maal #noorpina. Met het hekje geef je aan dat het om een ID 
gaat en door hem de naam Hoofding te geven, weet je straks nog 
waarvoor de stijl precies dient. Onze hoofding had een donkerrode 
achtergrond, dus klik in het Carecorv-menu op Backarounp en kies bij 
Backarounp-coLor voor Maroon. Ga daarna naar de Brock-categorie en 
verander TExT-ALIGN in CENTER. Zo komen de menu-items mooi in het 
midden te staan. Bij Box geef je als marein O op en bij Font kies je wit 
als Coror. Een druk op OK sluit het venster. 


Menu-items kleur geven 


Onze menu-items zijn in principe gewone hyperlinks. Maar die hebben 
we daarstraks de kleur Maroon gegeven, net als de achtergrond van 
onze hoofding. Een onzichtbaar menu navigeert niet zo handig, dus 
gaan we ervoor zorgen dat links die in de hoofding terechtkomen een 
andere kleur krijgen. Maak opnieuw een stijl aan en typ bij SeLector 
dit keer #noorpine A. Daarmee geven we aan dat deze stijl geldt voor 
alle links (de A-tag) binnen onze hoofding. Bij Font kies je wit als kleur 


Een dummypagina maken 


Al het werk van deel 1 ten spijt, gaan we onze pagina’s opnieuw van nul opbouwen, al 
zal het deze keer dankzij css wel wat sneller gaan. Vertrekken van een dummypagina 
kan je heel wat werk besparen. Dat is een pagina die de elementen bevat die op alle 
pagina’s terugkomen, zoals in ons geval de hoofding en het menu. Maak een nieuwe 
html-pagina aan en hang je css-bestand eraan met de link Arracu StyLe Sneet. Vervolgens 
sleep je een container op het werkblad. Als je die container geselecteerd hebt, ga je 
naar het tabblad AppLy Srytes in het kadertje rechtsonder. Daar zie je een rechthoek 
met een donkerrode achtergrond en #noorpine in witte letters. Dat is een voorbeeld 
van het #hoofding-ID dat je daarnet hebt gemaakt. Klik erop om de stijl te verbinden 
met de net aangemaakte container. Voeg de afbeelding van de hoofding in via Insekr, 
Picture, From Fire en druk op Enter om een nieuwe regel te beginnen. Voeg vervolgens 
de menu-items toe zoals in het eerste deel van deze cursus. Bewaar de pagina als 
DUMMY.HTM en druk op F12 om het resultaat te bewonderen. Nu kan je steeds vanuit 
deze pagina vertrekken om je andere pagina’s aan te maken. 


al Web Site |fstiness Ndummy.htm AS 


=| 


EN & à TJ E À 
j Mm jan de worsten 
Dankzij je dummypagina “ 8 pn waareen wo 
moet je nooit met een wit welkom worsten bestellen contact 
blad beginnen. 


a... Vreemd menu? 


me Komen de menu-items niet mooi naast elkaar te staan in het 

midden van de hoofding? Selecteer dan de container van de 
hoofding en verwijder in het CSS-Properries-kadertje links onderaan 
de waarden bij Herent en Wiprtn. 
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a. Een css-stijl aanpassen 


EE Css-stijlen kan je aanpassen in de Cope-weergave, maar ook 
in het Manace Sryres-tabblad rechts onderaan. Daar klik je met de 
rechtermuisknop op de stijl die je wil aanpassen en klik je in het 
contextmenu op Moprry Srvre. 


Selector: Ígthoofdina _ À 
Define in: |Currdag page v | URL: î ‚ 
5 on B Vergeet niet om dit 
puntje te verwijderen als 


ld je een ID aanmaakt! 


en bij TEXxT-pEcoRATION zet je een vinkje bij None. Bij Font-werent kies je 
voor Boro. Sluit af met OK en klik nog maar eens op New SrvLe. Bij 
SeLEctor typ je #HoorpinG A:Hover in, om de stijl toe te passen op links 
in de hoofding waar je met je muis overgaat. Bij Coror kies je opnieuw 
voor wit, maar bij Texr-DecorATIoN zet je nu een vinkje bij UnperL ine. Klik 
op OK en bewaar je vorderingen. Daarmee zit ons css-werk er voor- 
lopig op. 


Tekst omzetten naar tabellen 


Tijd voor de andere pagina's, te beginnen met die van de wor- 
sten. Bij de AanvuLrers op onze site vind je bij 
Clickx 145 het document worsten2.ooc, waarin je alles vindt wat 
je nodig hebt. Sleep een container naar het werkblad en posi- 
tioneer hem mooi onder het menu. Kopieer de inleidende tekst 
uit het Word-document en plak hem in de container via Eprr, 


Op deze pagina vindt u een overzicht van onze worsten. Hoewel we ed 
hier ons volledig assortiment te beschtiden Prizen zaluhiet niette 


meer inlichtingen kan u ons altijd Ween Text To Table (2) 
in de winkel. Kom dus zeker lang 


Separate text 


nn | 

‘hespenworst, O Paragraphs 

‘salami met look, O Tabs 

witte pensen, 

‘salami met peper, © Commas 

bloedpensen, O None {text in single cell} 


‘Ardense salami, 
gaumaisworst, 
‘kalkoensalami, 
‘droge worst, 
‘salami, 
‘knakworst, 
‘chorizo zacht, 
leverworst, 


O Other: 


Je kan eender wat gebruiken als scheidingsteken. 


Van één rij naar twee rijen 


Maar zoals gezegd hebben we twee kolommen nodig. Klik met je rech- 
termuisknop ergens in de tabel en kies Insert, CoLuMN To THE RiGHt om 
een rechterkolom aan te maken. Selecteer vervolgens de onderste helft 
van de worsten (vanaf ‘leverworst’ en knip die met Crru+X. Klik nu in 
de eerste cel van de rechterkolom en plak de gegevens met Creu-+V. Als 
alles goed gaat, staan de worsten nu netjes in de rechterkolom. Om de 
lege kolommen te verwijderen, selecteer je ze en klik je erop met je 
rechtermuisknop. In het snelmenu kies je voor Deere, Derere Rows. Je 
kan de container ook best wat breder maken, zodat alles niet op elkaar 
gedrukt zit. Sla de pagina op als WorSsten.ntM. 


hespenworst 
salami met look 


witte pensen 
salami met peper 
bloedpensen — 
Ardense salami (@ Paste 
8 Insert p Rows or Columns. 
kalkaensalami 
droge worst Delete P |E} Column to the Left 
salami Select DP | Column to the Right 
knakworst 
Modify à 
chorizo zacht 5 3 Ë Ko Bote 
eerworst Open Page in New Window ä Row Below 
chorizo pikant #4 Manage Editable Regions. 5e Celltothe Left 
chipolata 
Cell Properties land Il to the Right 
rookworst ls 
Kippenchipolsta Table Properties. Caption 
grillweorst Layer Properties. 
lunchworst Page Properties. 
WTZ A 
Eont.… 
5 bergworst 4e: 
Met enkele klikken (tdletarische worst |@, Hyperlink... 


kalfsworst 
pepperoni 


is je tabel ineens 
dubbel zo groot. 


Paste TEXT, NoRrMAL PARAGRAPHS WITH LiNE BreAKS. Rek de container 
wat uit, zodat hij even breed wordt als de hoofding. Sleep nog 
een container naar het werkblad en plaats die onder de vorige. 
Kopieer nu de worstenlijst op dezelfde manier naar deze con- 
tainer. Om het onze bezoekers makkelijker te maken, moeten 
we de lijst in twee kolommen gieten, en daar hebben we een 
tabel voor nodig. Gelukkig heeft Expression Web daar een han- 
dige optie voor aan boord, zodat je niet alles moet overtypen. 
Het enige wat je nog moet doen, is achter elke worstensoort 
een komma plaatsen. Vervolgens selecteer je de hele lijst en 
ga je in de menubalk bovenaan op zoek naar TasLe. Daar klik je 
vervolgens op Convert en Text To Tage. In het kadertje dat te- 
voorschijn komt, zet je een bolletje bij Commas. Met een druk 
op OK worden de verschillende worstensoorten mooi in een 
tabel gegoten. 


a. Flexibele tabel 


== Je kan makkelijk zorgen dat een tabel even groot is als zijn 

container en ook mee verandert als je de grootte van de 
container aanpast. Klik met je rechtermuisknop in de tabel en 
kies voor Tage Properries. Vervolgens zet je een vinkje bij Specirv 
Wip en Herent en een bolletje bij In Percent. De waarde verspringt 
automatisch naar 100. 


Het invulformulier 


welkom worsten bestellen contad 
:hespenworst leverworst 
“salami met look chorizo pikant 
witte pensen chipolata 
salami met peper rookworst 
bloedpensen kippenchipolata 
Ardense salami grillworst 
lunchworst 
MEINE, 
‘droge worst bergworst 
Esalami vegetarische 
E worst 
‘knakworst kalfsworst 


‘chorizo zacht pepperoni 


Een tabel is heel wat overzichtelijker dan een lijst. 


Op de BesteLLen-pagina moeten de klanten kunnen doorgeven 
hoeveel ze van welke worsten willen. De eenvoudigste en han- 
digste manier om dat te doen, is met een invulformulier. Open 
de dummypagina en bewaar hem meteen als BESTELLEN.HTM. Sleep 
een container op het werkblad en positioneer hem onder het 
menu. Nu ga je in de ToorBox onder de hoofding Form Contrors op 
zoek naar Form. Normaal gezien is dat de tweede mogelijkheid 
in de eerste kolom. Sleep zo’n formulier in de net aangemaakte 
container. Alles wat we nu in dat formulier gaan plaatsen, kun- 
nen we later naar onszelf laten doormailen. Open de Worsten- 
pagina en kopieer de tabel met de worsten. Open vervolgens 
opnieuw de BesteLLeN-pagina, zet de cursor in het formulierveld 
en plak de tabel opnieuw. Naast elke worst moet een invulveld 
komen voor de hoeveelheid, dus voeg naast elke kolom een 
nieuwe kolom in met INsERT, COLUMN TO THE Riant. 


Invoervelden definiëren 


Een invoerveld vind je in de Toorgox bij Form Controts als voorlaatste element in de 
tweede kolom, onder de naam Input (Text). Klik met je rechtermuisknop op dat in- 
voerveld en kies Form Fiep Properties in het menu. Bij Name geef je de naam van de 
worst in waarvoor dit veld dient. WiptH in cHARACTERS verander je in 5, zodat het 
invoerveld niet al te breed is. Kopieer het invulveld nu naar de andere worsten en 
pas telkens de naam van het veld aan. Typ ten slotte achter elk invoerveld het 
woordje “gram”, zodat de klanten weten welke eenheid ze moeten gebruiken om 
hun bestelling door te geven. Onderaan het formulier moet je nog een knop plaat- 
sen waarmee de klant het formulier kan verzenden. Sleep een knop Input (Sugm:r) 
— het voorlaatste element in de eerste kolom van de Toolbox — onder je tabel en 
zet er ook een knop Inpur (Reser) naast. Om de knoppen een ander (Nederlandstalig) 
opschrift te geven, klik je er met je rechtermuisknop op en kies je Form Frein Pro- 
PERTIES. Verander de waarde van Varve/LageL bijvoorbeeld in BesteLten en Wissen. 


Push Button Properties 


Name: Reset 


Valueflabel: Wissen ij 


Button type: © Normal O Submit @ Reset 


Tab order: 


BERRETOD 


Als je je bezoekers wil pesten, 
kan je de naam van beide knop- 
pen ook verwisselen zonder hun 
functie te veranderen. 


chorizo zacht 


input 
Verzenden 
pe 


gram 
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De actie bepalen 


Nu moet je er nog voor zorgen dat de inhoud van het formulier tot bij Jan de Wor- 
stenman kan geraken. Rechtsklik ergens binnen het formulier en kies Form ProPeRTIES 
in het uitklapmenu. Vul bij Form Name bijvoorbeeld BesteLFormuLrer in. Druk vervolgens 
links onderaan op de knop Options. Dan komt er opnieuw een kadertje te voorschijn. 
Bij Action voer je via pe site in. Dat vertelt 
de Verzenden-knop dat het formulier naar moet gestuurd worden, 
met als onderwerp ‘Bestelling via de site’. Merop mag je op Post laten staan en in 
het Encopina Tvpe-veld typ je Text/pLain, zodat Jan de resultaten in tekstvorm door- 
gemaild krijgt. Druk twee maal op OK om af te ronden. Als je nu deze pagina gaat 
testen in je browser en je drukt op Verzenpen, zal er een nieuw e-mailbericht geopend 
worden met daarin de gegevens die je in het formulier hebt ingevoerd. Ook het 
e-mailadres van Jan de Worstenman staat al op zijn plaats, zodat je alleen nog maar 


Form Properties 


Where to store results 


O Send to (Requires FrontPage Server Extensions) 


Action:  ‘otjan@worstenman.be?subject=bestelling via de sitel 


Method: (post 


Encading type: text/plain 


Het e-mailadres en het onderwerp van de mail kan je 


op Verzenpen hoeft te drukken om de bestelling naar hem te mailen. 


a. Container aanpassen aan inhoud 


I= Als je een container selecteert, kan je zijn grootte wijzigen 
door met de hoekpunten te slepen. Als je dubbelklikt op één van die 
punten, past de container zich automatisch aan de grootte van de 
inhoud aan. 


Formulier versturen zonder e-mail te gebruiken 


Het zou natuurlijk nóg handiger zijn als de inhoud van het formulier wordt ver- 
stuurd zonder dat de bezoeker een beroep moet doen op zijn e-mailprogramma. 
Met scriptingtalen zoals php en asp kan je daar relatief eenvoudig voor zorgen, 
maar op de meeste gratis webruimtes (zoals die van Telenet en Belgacom) kan je 
dat soort scripts niet draaien. In ruil biedt de provider dan meestal wel een cgi-bin 
aan, een soort korf met verschillende scripts. Eentje ervan dient om formulieren 
door te sturen. De locatie van dat script moet je dan invoeren in het Actron-veld, 
zoals in het vorige kadertje beschreven. Staat je webstek op de servers van Belga- 
com, dan geef je bij Acton de url HtrP://usErs.sKYNeT.Be/car-Bin/rormo.cer in. Telenetge- 
bruikers voeren /cer-Bin/rorm.cer in. Werk je met een andere provider, dan vraag je 
hem best zelf welke actie je moet gebruiken. Om te testen of je formulier werkt, 
moet je het wel naar je webruimte uploaden en het daar uitproberen. Van op je 
computer zal je het niet aan de praat krijgen. 


VAKTAAL 


ASP: Een soort raamwerk van Microsoft voor het maken van dynamische webpagina's. 
Dergelijke pagina's herken je aan de extensie .asp. Een dynamische webpagina wordt 
opgebouwd op het moment dat de surfer de informatie opvraagt. Vaak wordt hierbij een 
databank geraadpleegd. 


CGI: Common Gateway Interface. Met CGI kan je vanuit een website gegevens sturen naar 


natuurlijk aan je eigen wensen aanpassen. 


Visitekaartje 


Ten slotte moeten we ook de Conracr-pagina van nuttige informatie 
voorzien. We houden het sober met een visitekaartje. Sleep een 
container op het werkblad en maak hem 330 pixels breed en 200 
pixels hoog. Kopieer vervolgens alles wat in worsten2.ooc onder (visi- 
tekaartje) staat. Plak het in de container via Eorir, Paste TEXT, NorMaL 
PARAGRAPHS WITH Line BREAKS. Nu moet je nog een gepaste stijl maken, 
dus open je css-bestand en klik op het tabblad Manace Stres links 
onderaan op New Stvue. Geef hem de naam #contacr en klik op de 
categorie Borper. Als Borper-styLe neem je Dorren, als BorDer-WiDtH geef 
je 2 op en als kleur kies je opnieuw Maroon. Vervolgens klik je door 
naar de categorie Box, waar je bij Pappina het vinkje verwijdert bij 
SAME FoR ALL. Verander alle eigenschappen van Pappina in 5; enkel Lert 
verander je in 20. Tot slot maak je een laatste nieuwe stijl aan en 
kies je bij selector voor H1. Geef die tag 18 mee als Fonr-size, als 
Font-VARIANT kies je SmaLi-caps en je duidt opnieuw Maroon aan als 
kleur. Bij Brock verander je Texr-ALran in CENTER. Druk op OK en selec- 
teer de woorden Jan pe WorstENMAN in het visitekaartje. Als je nu 
onder de menubalk bovenaan in het kadertje met Paraarapn kiest 
voor Heapine 1, krijgt je visitekaartje een mooie hoofding. Om het 
helemaal af te maken, kan je ook nog de woorden Apres, TELEFOON, FAX 
en E-MaiL vet maken. « 

Insert Format Tools Table Site DataView TaskPanes Window Help 


19 ZU En: 
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‚v_ Heading 1 


Beria, Helvetica, sans-serif » 18px 


Heading 4 <h4> 

Heading 5 <h5> 

Heading 6 <h6> hed 
Unordered List <ul> as | 
Ordered List <ol> ar 
Defined Term <dt> 

Definition <dd> , … 

Address <address> Welkom Worsten Bestellen Conta 
Preformatted <pre> am, 

Block Quote <blockquote> | 

apply Styles… 


en ontvangen van andere programma’s die op de webserver zijn geïnstalleerd. CG is echter 5 
ingewikkeld. Makkelijkere alternatieven zijn asp of php. Dx 
Nroperties _X| 


PHP: Tegenhanger van asp voor dynamische webpagina's. Dergelijke pagina's herken je 


(Current Page) 


aan de extensie .php, .php3 of .phpá4. Een dynamische webpagina wordt opgebouwd op het Ze 
moment dat de surfer de informatie opvraagt. Vaak wordt hierbij een databank gebruikt. 
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jan@worstenman he 


Als je verschillende 
hoofdingen wil 
gebruiken, kan je 
voor elke Heading 
een andere stijl 
aanmaken. 


